<template>
    <div class="tabsContainer border_style bg_style ">
        <label class="text_01">设备总数 ({{ this.deviceNoNum }})</label>
        <div class="banners">
            <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
                <swiper-slide class="swiper-item" v-for="(item, index) in deviceListInfos"
                    :class="{ 'curActive': currentSwiper == index }" @click.native="setSwiperItem(item, index)">
                    <img :src="require('../../../assets/images/leftIcon.png')">
                    <div class="swiper-text">
                        <p><label>设备号：</label><span>{{ item.key }}</span></p>
                        <p style="margin-top:16px"><label>焊口数：</label><span>{{ item.val }}</span></p>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
  
<script>
import { mapActions } from "vuex";
//引入
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
    props: {
        // 显示几列
        deviceNoNum: {
            type: Number,
            default: 0
        }
    },
    components: { swiper, swiperSlide },
    data() {
        return {
            currentSwiper: null,
            swiperOption: {
                loop: false,  // 是否循环轮播
                autoplay: false,  // 是否可以自动轮播
                slidesPerView: 'auto',  // 可是区域内可展示多少个块
                spaceBetween: 16,  // 块之间间隔距离
                initialSlide: 0,  // 默认初始显示块
                freeMode: false,
            },
            deviceListInfos: []
        }
    },
    methods: {
        ...mapActions(["getprojectDeviceAnalysisAPI"]),
        //获取设备列表
        getDeviceList(params) {
            let _this = this
            _this.getprojectDeviceAnalysisAPI(params).then(res => {
                let { data, msg, scode, status } = res;
                if (status === 'ok') {
                    if (data.deviceList) {
                        this.deviceListInfos = data.deviceList
                        this.currentSwiper = 0
                        if (this.deviceListInfos.length > 0) {
                            this.$emit('createTasks', this.deviceListInfos[0])
                        } else {
                            this.$emit('createTasks', {})
                        }
                    } else {
                        this.deviceListInfos = []
                        this.$emit('createTasks', {})
                    }
                } else {
                    _this.$YsMessage.error(msg);
                }
            }).catch(err => {
                _this.$YsMessage.error('获取数据失败');
            })
        },
        //获取表格数据
        setSwiperItem(item, index) {
            this.currentSwiper = index
            this.$emit('createTasks', item)
        },
    }
}
</script>
<style scoped lang='less'>
.tabsContainer {
    width: 100%;
    height: 176px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #CFD7E5;
    padding: 14px 16px;

    label {
        font-size: 14px;
        font-weight: 600;

    }

    .banners {
        // height: 140px;
        margin-top: 10px;

        .swiper-wrapper {
            .swiper-item {
                border: 1px solid #CFD7E5;
                padding: 24px 16px 24px 24px;

                width: 298px !important;
                height: 112px;
                background: #FFFFFF;
                border-radius: 4px 4px 4px 4px;

                display: flex;

                img {
                    width: 64px;
                    height: 64px;
                    margin-right: 16px;
                }

                .swiper-text {
                    label {
                        font-weight: initial;
                        font-size: 16px;
                    }

                    p {
                        font-size: 16px;

                    }
                }
            }

            .curActive {
                border: 1px solid #0061FF !important;
            }
        }
    }
}
</style>